<template>
    <el-card>
        <div slot="header" class="clearfix">
            <h3>课程数据</h3>
        </div>
        <!-- 搜索栏 -->
        <div class="search-box">
            <el-select v-model="coursesSearchData.subjectsId" placeholder="请选择">
                <el-option v-for="item in subjectsOptionData" :key='item._id' :label="item.name" :value="item._id">
                </el-option>
            </el-select>
        </div>
        <!-- 课程数据列表渲染栏 -->
        <el-table :data="coursesData" stripe style="width: 100%">
            <el-table-column prop="_id" label="课程编号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="课程姓名" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="toUpdateVue(scope.row._id)">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleteOneStudentSubmit(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script>
    import api from "../../../http/modules/api";

    import {
        createNamespacedHelpers
    } from "vuex";
    // 引入课程辅助函数
    const {
        mapState: coursesmapState,
        mapMutations: coursesmapMutations,
        mapActions: coursesmapActions,
    } = createNamespacedHelpers(
        "courses"
    );
    export default {
        data() {
            return {
                subjectsOptionData : [],
            }
        },
        computed: {
            ...coursesmapState([
                "coursesSearchData",
                "coursesData",
            ]),
        },
        mounted() {
            this.getSubjectOptionData();
            // 进入页面加载课程列表
            this.getCoursesBySubjectsId();
        },
        watch: {
            "coursesSearchData.subjectsId"(val) {
                if (val) {
                    this.getCoursesBySubjectsId();
                }
            }
        },
        methods: {
            ...coursesmapActions(["getCoursesBySubjectsId"]),
            // 获取专业数据
            async getSubjectOptionData(){
                const res = await api.subjects.getSubjects();
                if(res.code){
                    this.subjectsOptionData = res.data.result
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .el-card {
        .search-box {
            width: 100%;
            display: flex;
        }

        ;

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-row {
            padding: 10px 5px;

            .el-col {
                &:last-child {
                    text-align: right;
                }
            }
        }

        .el-button-group {
            padding: 20px 0px;
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .pages-data {
            margin-top: 20px;
            width: 100%;
        }
    }
</style>